<template>
  <div>
    <van-tabs :v-model:active="active">
      <!-- 按肤质 按星级排序 -->
      <p class="title">
        按肤质 <span class="triangle"></span> &emsp;按星级
        <span class="triangle"></span>
      </p>

      <van-tab title="全部">
        <!-- 热门评价 -->
        <ul class="hot">
          <h3>热门评论</h3>
          <li>
            <div class="left">
              <img src="@/assets/indeximg/user.png" alt="" />
            </div>
            <div class="right">
              <p class="top">
                只会抱佛脚的小朋友
                <img src="@/assets/indeximg/stars.png" alt="" class="star" />
                <span
                  >155
                  <img src="@/assets/indeximg/good.png" alt="" class="good"
                /></span>
              </p>
              <p class="time">12-29 01:41</p>
              <p class="content">
                用之前记得摇晃,再按压,不用再搓,一挤出来
                就是泡泡了，用完脸没有那么油,感觉也挺水润
                啊,人生第一支洗面奶,好用啊,建议购买
              </p>
            </div>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/indeximg/user.png" alt="" />
            </div>
            <div class="right">
              <p class="top">
                只会抱佛脚的小朋友
                <img src="@/assets/indeximg/stars.png" alt="" class="star" />
                <span
                  >155
                  <img src="@/assets/indeximg/good.png" alt="" class="good"
                /></span>
              </p>
              <p class="time">12-29 01:41</p>
              <p class="content">
                用之前记得摇晃,再按压,不用再搓,一挤出来
                就是泡泡了，用完脸没有那么油,感觉也挺水润
                啊,人生第一支洗面奶,好用啊,建议购买
              </p>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="只看同肤质">卸妆</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
import { ref } from "vue";
import "vant/es/tab/style";
import "vant/es/tabs/style";
export default {
  data() {
    return {};
  },
  setup() {
    const active = ref(1);
    return { active };
  },

  components: {
    VanTab: Tab,
    VanTabs: Tabs,
  },

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";

:deep(.van-tab__text--ellipsis) {
  height: 3px;
  font-size: 28px;
  .font_f_w ();
  padding-bottom: 10px;
  overflow: visible;
  justify-content: center;
  display: inline-block;
  font-size: 28px;
  color: #999;
}
:deep(.van-tabs__wrap) {
  padding: 0 400px 0 0;
  height: 90px;
  .border-bottom();
  margin-bottom: 10px;
  width: 100%;
  position: relative;
}
//按肤质 按星级排序

.title {
  height: 90px;
  line-height: 90px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 28px;
  padding: 0 40px 0 0;
  .font_f_w ();
  color: #999;
  .triangle {
    display: inline-block;
    border: 8px solid #999;
    border-color: #999 transparent transparent transparent;
    margin-bottom: -5px;
  }
}
// 热门评论
.hot {
  padding: 0 37px 0 30px;
  h3 {
    padding: 45px 0;
    font-size: 30px;
    .font_f_w ();
    color: #333333;
  }
  li {
    .between();
    padding-bottom: 45px;
    .left {
      img {
        height: 75px;
        width: 75px;
      }
    }
    .right {
      height: 250px;
      width: 590px;
      .border-bottom();
      .top {
        font-size: 26px;
        .font_f_w ();
        color: #63c8c8;
        .star {
          width: 122px;
          height: 21px;
          margin-right: 100px;
        }
        .good {
          width: 28px;
          height: 29px;
        }
      }
      .time {
        font-size: 20px;
        .font_f_w ();
        color: #afafaf;
        font-weight: normal;
        padding: 13px 0 13px 0;
      }
      .content {
        font-size: 28px;
        .font_f_w ();
        color: #333333;
        font-weight: normal;
        line-height: 40px;
      }
    }
  }
}
</style>
